<template>
	<view>
		<u-tabbar :value="tabbarData || 0" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			activeColor="#DE868F">
			<u-tabbar-item @click="handleTabClick(0,'/pages/index/index')">
				<template #active-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/home2.png"></image>
					<span class="xzText">{{ $t('home') }}</span>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/home.png"></image>
					<span class="wxzText">{{ $t('home') }}</span>
				</template>
			</u-tabbar-item>
			<u-tabbar-item @click="handleTabClick(1,'/pages/list/list')">
				<template #active-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/lb2.png"></image>
					<span class="xzText">{{ $t('commodity') }}</span>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/lb.png"></image>
					<span class="wxzText">{{ $t('commodity') }}</span>
				</template>
			</u-tabbar-item>
			<div class="newAdd" @click="navigatorTo('/pages/newAdd/newAdd')">
				<image src="@/static/images/addBtn.png" alt="" />
			</div>
			<u-tabbar-item @click="handleTabClick(2,'/pages/wisdom/wisdom')">
				<template #active-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/zw2.png"></image>
					<span class="xzText">{{ $t('tabbarSmartPlay') }}</span>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/zw.png"></image>
					<span class="wxzText">{{ $t('tabbarSmartPlay') }}</span>
				</template>
			</u-tabbar-item>
			<u-tabbar-item @click="handleTabClick(3,'/pages/me/me')"><template #active-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/we2.png"></image>
					<span class="xzText">{{ $t('tabbarMine') }}</span>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" src="@/static/images/we.png"></image>
					<span class="wxzText">{{ $t('tabbarMine') }}</span>
				</template></u-tabbar-item>
		</u-tabbar>
		<!-- <div style="width: 100%;height: 3.6rem;"></div> -->
	</view>
</template>

<script>
	import {
		getFull
	} from "@/api/meApi/me.js"
	import {
		useCommonStore
	} from '@/stores/useCommonStore'; // 引入 Store
	export default {
		props: {
			tabbarData: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				commonStore: null // 先声明一个变量存储 Store 实例
			}
		},
		created() {
			// 在组件初始化后（Pinia 已注册）再获取 Store
			this.commonStore = useCommonStore();
		},
		onLoad() {

		},
		methods: {
			// 处理 tab 点击事件，并向父组件传递信息
			handleTabClick(index, url) {
				this.commonStore.setActiveIndex(index)
				// this.$emit('tab-click', {
				// 	index: index, // 点击的 tab 索引
				// 	url: url, // 对应的页面路径
				// });
				// 2. 执行原本的跳转逻辑（如果需要在组件内保留跳转）
				this.jumpTo(url);
			},

			jumpTo(url) {
				uni.switchTab({
					url
				})
				// uni.navigateTo({
				//     url
				// })
			},
			navigatorTo(url) {
				getFull().then((res) => {
					if (res.code == 200) {
						if (!res.data.phone) {
							uni.navigateTo({
								url: '/pages/newAdd/bindnumber'
							})
							return
						}
					}
				})
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.newAdd {
		width: 20%;
		height: 100%;
		text-align: center;

		image {
			width: 80%;
			height: 80%;
			margin-top: 6%;
		}
	}

	::v-deep .u-tabbar-item__icon {
		display: flex;
		flex-direction: column;
		align-items: center;

		.xzText {
			font-size: 20rpx;
			color: #000000;
		}

		.wxzText {
			font-size: 20rpx;
			color: #878787;
		}
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	::v-deep .u-tabbar {
		background-color: transparent !important;
	}
</style>